<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta name="renderer" content="webkit">
    <!-- TopJUI框架样式 -->
    <link type="text/css" href="../../topjui/themes/default/topjui.core.min.css" rel="stylesheet">
    <link type="text/css" href="../../topjui/themes/default/topjui.blue.css" rel="stylesheet" id="dynamicTheme"/>
    <!-- FontAwesome字体图标 -->
    <link type="text/css" href="../../static/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet"/>
    <!-- layui框架样式 -->
    <link type="text/css" href="../../static/plugins/layui/css/layui.css" rel="stylesheet"/>
    <!-- jQuery相关引用 -->
    <script type="text/javascript" src="../../static/plugins/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="../../static/plugins/jquery/jquery.cookie.js"></script>
    <!-- TopJUI框架配置 -->
    <script type="text/javascript" src="../../static/public/js/topjui.config.js"></script>
    <!-- TopJUI框架核心-->
    <script type="text/javascript" src="../../topjui/js/topjui.core.min.js"></script>
    <!-- TopJUI中文支持 -->
    <script type="text/javascript" src="../../topjui/js/locale/topjui.lang.zh_CN.js"></script>
    <!-- layui框架js -->
    <script type="text/javascript" src="../../static/plugins/layui/layui.js" charset="utf-8"></script>
</head>

<body>

<!-- layout布局 开始 -->
<div data-toggle="topjui-layout" data-options="fit:true">
    <div data-options="region:'west',title:'树形导航',fit:false,split:true,border:false,width:'20%',iconCls:'icon-org',headerCls:'border_right',bodyCls:'border_right'">
        <table data-toggle="topjui-treegrid"
               data-options="id:'channelDg',
			   idField:'id',treeField:'text',
			   url:'/system/api/getChannelsById?id=1',
            expandUrl:'/system/api/getChannelsByPid?pid={id}',
            childGrid:{
            param:'id:id',
            grid:[
            {type:'datagrid',id:'articleDg'},
            ]
            }">
            <thead>
            <tr>
                <th data-options="field:'uuid',title:'UUID',checkbox:true"></th>
                <th data-options="field:'text',title:'栏目名称',width:100"></th>
            </tr>
            </thead>
        </table>
    </div>

    <div data-options="region:'east',iconCls:'icon-chart_pie',title:'',split:true,border:false,width:'40%',bodyCls:'border_left'">
        <div data-toggle="topjui-tabs" data-options="id:'eastTabs',fit:true,border:false,
				 tab:[
				 	{type:'panel',id:'detail1Panel'},
				 	{type:'panel',id:'detail2Panel'}
				 ]">
            <div title="第一个tab页（动态加载内容）"
                 data-options="id:'detail1Panel',iconCls:'icon-table',
					 dynamicHref:'/system/api/articleDetail?uuid={uuid}',
							parentGrid:{
								type:'datagrid',
								id:'articleDg',
								param:'uuid'
							}"></div>
            <div title="第二个tab页（动态加载内容）"
                 data-options="id:'detail2Panel',iconCls:'icon-table',
					 dynamicHref:'/system/api/articlePrint?uuid={uuid}',
							parentGrid:{
								type:'datagrid',
								id:'articleDg',
								param:'uuid'
							}"></div>
        </div>
    </div>

    <div data-options="region:'center',iconCls:'icon-reload',title:'',fit:false,split:true,border:false,bodyCls:'border_left_right'">
        <!-- datagrid表格 -->
        <table data-toggle="topjui-datagrid"
               data-options="id:'articleDg',
               fitColumns:true,
               url:'/system/api/getArticlePageSet',
               childTab: {
                   tab:[
                        {id:'eastTabs',param:'uuid'}
                   ]
               }">
            <thead>
            <tr>
                <th data-options="field:'uuid',title:'UUID',checkbox:true"></th>
                <th data-options="field:'title',title:'标题',width:100,sortable:true,formatter:openNewTab"></th>
                <th data-options="field:'createTime',title:'创建时间',sortable:true"></th>
            </tr>
            </thead>
        </table>
    </div>

</div>
<!-- layout布局 结束 -->

<script>
    function openNewWindow(value, row, index) {
        return '<a href=\"' + '/system/article/detail?uuid=' + row.uuid + '\" target=\"_blank\">' + value + '</a>'
    }
    function openNewTab(value, row, index) {
        return '<a href="javascript:window.parent.addParentTab({href:\'' + '/system/article/detail?uuid=' + row.uuid + '\',title:\'' + row.title + '\'})\">' + value + '</a>'
    }
</script>

<!-- 表格工具栏 -->
<div id="articleDg-toolbar"
     data-options="grid:{
        type:'datagrid',
        id:'articleDg'
     }" class="topjui-toolbar">
    <a href="javascript:void(0)"
       data-toggle="topjui-menubutton"
       data-options="method:'openDialog',
       parentGrid:{
           type:'treegrid',
           id:'channelDg',
           param:'cid:id',
           unselectedMsg:'请先选择文章要发布的左侧树形导航中的栏目'
       },
       dialog:{
           id:'articleAddDialog',
           href:_ctx + '/html/article/add.html',
           width:900,
	  	   height:500,
	  	   maximizable:false,
	  	   editor:[
			   {id:'contentAddEditor',field:'content'}
		   ],
           buttonsGroup:[
               {text:'保存',url:'/system/api/saveArticle',iconCls:'fa fa-plus',handler:'ajaxForm'}
           ]
       }">新增</a>
    <a href="javascript:void(0)"
       data-toggle="topjui-menubutton"
       data-options="method:'openDialog',
       iconCls:'icon-edit',
       dialog:{
           id:'articleEditDialog',
           href:_ctx + '/html/article/edit.html?uuid={uuid}',
           url:'/system/api/getArticleDetailByUuid?uuid={uuid}',
           width:900,
	  	   height:500,
	  	   maximizable:false,
	  	   editor:[
			   {id:'contentEditEditor',field:'content'}
		   ],
           buttonsGroup:[
               {text:'更新',url:'/system/api/updateArticle',iconCls:'icon-save',handler:'ajaxForm'}
           ]
       }">编辑</a>
    <a href="javascript:void(0)"
       data-toggle="topjui-menubutton"
       data-options="method:'delete'">删除</a>
    <a href="javascript:void(0)"
       data-toggle="topjui-menubutton"
       data-options="method:'filter'">过滤</a>
    <a href="javascript:void(0)"
       data-toggle="topjui-menubutton"
       data-options="method:'search'">查询</a>
    <a href="javascript:void(0)"
       data-toggle="topjui-menubutton"
       data-options="method:'export'">导出</a>
</div>

<script type="text/javascript" src="/static/plugins/ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="/static/plugins/ueditor/ueditor.all.min.js"></script>

</body>
</html>